【CSS】z-index - 要素の重ね順序

CSSのz-indexプロパティについて解説します。

検証環境

CSS

macOS

14.1

z-index

z-indexは“要素の重ね順序”のプロパティです。

このプロパティはposition（staticを除く）を定義した要素に効果があります。

値が大きい要素が上に表示されます。

基本構文

z-index: 値;

サンプル

sample.html

<style>
.container {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    position: relative;
}
.box {
    height: 100px;
    width: 100px;
    position: absolute;
}
.box1 {
    background: blue;
    top: 10px;
    left: 10px;
    ___ih_hl_start
    z-index: 2;
    ___ih_hl_end
}
.box2 {
    background: green;
    top: 50px;
    left: 50px;
    ___ih_hl_start
    z-index: 1;
    ___ih_hl_end
}
</style>

<div class="container">
    <div class="box box1"></div>
    <div class="box box2"></div>
</div>

プレビュー